<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="js/jquery.js"></script>	
    <script type="text/javascript" src="js/cufon-yui.js"></script>
    <script type="text/javascript" src="js/Optima_400.font.js"></script>
    <script type="text/javascript" src="js/jquery.bgpos.js"></script>
    <title>Faster Saúde</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
		$(document).ready(function() {	
			Cufon.replace('#barra');
			Cufon.replace('#menu');
			Cufon.replace('h2');
			//
			$("#carrinho").hover(function() {
				$("#carrinho").addClass("absolute");
				$("#items").fadeIn().animate({ height: '+=110px'}, 1000);
			},function() {
				$("#items").animate({height: '0px'}, 500).fadeOut();
				$("#carrinho").removeClass("absolute");
			});
			//						
			$('#menu ul li')
				.css( {backgroundPosition: "0px -80px"} )
				.mouseover(function(){
					$(this).stop().animate({backgroundPosition:"(0px 0px)"}, {duration:500})
				})
				.mouseout(function(){
					$(this).stop().animate({backgroundPosition:"(-220px -80px)"}, {duration:500, complete:function(){
					$(this).css({backgroundPosition: "0px -80px"})
				}})
			})
		});
	</script>
</head>
<body>
<div id="barra">
	<div class="centro">
		<ul id="nav">
			<li>Empresa</li>
			<li>Artigos</li>
			<li>Perguntas Frequentes</li>
			<li>Formas de Pagamento</li>
			<li>Envios</li>
			<li class="last">Contato</li>
		</ul>
		<div id="carrinho">
			<img src="imagens/ico_carrinho.png" position="absmiddle" />&nbsp;
			Carrinho (1 item)
			<div id="items">
				<table width="100%">
					<tr>
						<td>Produto X</td>
						<td>R$ 100,00</td>
						<td>[X]</td>
					</tr>
					<tr>
						<td>Produto X</td>
						<td>R$ 100,00</td>
						<td>[X]</td>
					</tr>
					<tr>
						<td>Produto X</td>
						<td>R$ 100,00</td>
						<td>[X]</td>
					</tr>	
				</table>
			</div>
		</div>
	</div>
</div>
<div id="topo">
	<div class="centro" style="height:184px;">
		<div id="left"><img src="imagens/logo.png" vspace="10" /></div>
		<div id="right" style="padding-top:140px;">
			<input type="text" placeholder="Pesquisar em todo site" class="pesq" />
			<input type="submit" class="btn_buscar" />
		</div>
	</div>
	
	<div id="menu">
		<ul>
			<li>Cadeiras Motorizadas</li>
			<li>Calçados Ortopédicos</li>
			<li>Meias de Compressão</li>
			<li class="last">Palmilhas Ortopédicas</li>
		</ul>	
	</div>
</div>
<br class="clear" />
<div id="banner"><img src="imagens/banner.jpg" /></div>
<div id="conteudo" class="centro">
	<div id="left" style="width:680px">
		<ul id="produtos">
			<li>
				<h3>SAPATO MASC. PARLEMO</h3>
				<div id="sombra_foto">
					<div id="foto">
						<div id="promo"></div>
						<img src="">
					</div>
				</div>
				<p class="price">por R$ 380,00</p>
				<div id="btn_det"></div>
			</li>
			<li>
				<h3>SAPATO MASC. PARLEMO</h3>
				<div id="sombra_foto">
					<div id="foto">
						<div id="promo"></div>
						<img src="">
					</div>
				</div>
				<p class="price">por R$ 380,00</p>
				<div id="btn_det"></div>
			</li>
			<li>
				<h3>SAPATO MASC. PARLEMO</h3>
				<div id="sombra_foto">
					<div id="foto">
						<div id="promo"></div>
						<img src="">
					</div>
				</div>
				<p class="price">por R$ 380,00</p>
				<div id="btn_det"></div>
			</li>
			<li>
				<h3>SAPATO MASC. PARLEMO</h3>
				<div id="sombra_foto">
					<div id="foto">
						<div id="promo"></div>
						<img src="">
					</div>
				</div>
				<p class="price">por R$ 380,00</p>
				<div id="btn_det"></div>
			</li>
			<li>
				<h3>SAPATO MASC. PARLEMO</h3>
				<div id="sombra_foto">
					<div id="foto">
						<div id="promo"></div>
						<img src="">
					</div>
				</div>
				<p class="price">por R$ 380,00</p>
				<div id="btn_det"></div>
			</li>
			<li>
				<h3>SAPATO MASC. PARLEMO</h3>
				<div id="sombra_foto">
					<div id="foto">
						<div id="promo"></div>
						<img src="">
					</div>
				</div>
				<p class="price">por R$ 380,00</p>
				<div id="btn_det"></div>
			</li>
		</ul>
	</div>
	<div id="right" style="width:270px;">
		<div id="artigo">
			<span>Artigo</span>
			<h2>A importância dos seus pés</h2>
			<p class="legenda">Dr. Fulano de Tal</p>
			<img class="artigo" />
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
			</p>
			<p class="mais">Leia mais ></p>
		</div>
		
		<div id="artigo">
			<span>Artigo</span>
			<h2>A importância dos seus pés</h2>
			<p class="legenda">Dr. Fulano de Tal</p>
			<img class="artigo" />
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
			</p>
			<p class="mais">Leia mais ></p>
		</div>
	</div>
</div>
<div id="rodape">
	<div class="centro">
		<div id="left">
			<img src="imagens/pagseguro.png" />
		</div>
		<div id="right" style="text-align:right;">
			FasterSaúde © 2012<br />
			Rua 123, de Oliveira - Menino Deus - Porto Alegre - RS<br />
			(51) 3222-1234 | (51) 8111-1111<br />
		</div>
	</div>
</div>
</body>
</html>